<template>
  <div class="header">
    <!--盒子-->
    <div class="box">

      <!--左侧-->
      <div class="left" @click="goHome">
        <!--图片-->
        <img src="../../assets/header/logo.jpg">
        <img src="../../assets/header/wyxjava.jpg">
      </div>

      <!--中间-->
      <div class="center-box">
        <div :class="{'home':true,'now':choiceId == 'home'}"
             ref="home"
             @mouseenter="hover(`home`)"
             @mouseleave="over(`home`)"
             @click="gotoRouter(`home`)">
          首页
        </div>
        <div :class="{'course':true,'now':choiceId == 'course'}"
             ref="course"
             @mouseenter="hover(`course`)"
             @mouseleave="over(`course`)"
             @click="gotoRouter(`course`)">
          课程
        </div>
        <div :class="{'nav':true,'now':choiceId == 'nav'}"
             ref="nav"
             @mouseenter="hover(`nav`)"
             @mouseleave="over(`nav`)"
             @click="gotoRouter(`nav`)">
          导航
        </div>
      </div>

      <!--右侧-->
      <div class="right-box">
        <!--搜索框-->
        <div class="search-box">
          <Search></Search>
        </div>
        <!--登录-->
        <div class="login"
             v-if="!isLogin"
             @click="login">
          登录
        </div>
        <!--个人中心-->
        <div class="userCenter"
             v-if="isLogin">
          <Dropdown @on-click="selectMenu">
            <span>{{userInfo.userName}}</span>
            <DropdownMenu slot="list">
              <DropdownItem name="userCenter">
                个人中心
              </DropdownItem>
              <DropdownItem divided name="signOut">
                退出
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import Search from "./Search";
  import {delCookie} from "../../tools/cookie";

  export default {
    name: "",
    components: {
      Search
    },
    data() {
      return {
        choiceId: "home",
      }
    },
    computed: {
      isLogin() {
        return this.Store.getters.getIsLogin;
      },
      userInfo() {
        return this.Store.getters.getUserInfo;
      }
    },
    methods: {
      //去到首页
      goHome: function () {
        this.choiceId = 'home'
        this.$router.push("/");
      },
      //鼠标移进去
      hover: function (tab) {
        let div;
        switch (tab) {
          case "home":
            div = this.$refs.home;
            break;
          case "course":
            div = this.$refs.course;
            break;
          case "nav":
            div = this.$refs.nav;
            break;
        }
        div.style.backgroundColor = "#33AFF3"
        div.style.borderRadius = "2px"
        div.style.color = "#FFFFFF"
        div.style.fontSize = "20px"
        div.style.fontWeight = "bolder"
      },
      //鼠标移出去
      over: function (tab) {
        let div;
        switch (tab) {
          case "home":
            div = this.$refs.home;
            break;
          case "course":
            div = this.$refs.course;
            break;
          case "nav":
            div = this.$refs.nav;
            break;
        }
        div.style.backgroundColor = "#FFFFFF"
        div.style.color = "#000000"
        div.style.fontSize = "18px"
        div.style.fontWeight = "lighter"
      },
      //去到路由
      gotoRouter: function (tab) {
        switch (tab) {
          case "home":
            this.choiceId = 'home'
            this.$router.push("/")
            break;
          case "course":
            this.choiceId = 'course'
            this.$router.push("/subject")
            break;
          case "nav":
            this.choiceId = 'nav'
            this.$router.push("/navigation")
            break;
        }
      },
      //选择菜单
      selectMenu: function (name) {
        switch (name) {
          case "userCenter":
            this.$router.push("userCenter")
            break;
          case "signOut":
            //删除 sessionStorage
            window.sessionStorage.clear();
            //删除 cookie
            delCookie("isLogin");
            delCookie("token");
            delCookie("userInfo");

            // this.Bus.$emit("my-event-header-load", true);
            //刷新页面到首页
            window.location.replace("/")
            break;
        }
      },
      //登录
      login: function () {
        this.$router.push("login")
      }
    },
    mounted() {
    }
  }
</script>

<style scoped>
  .header {
    box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
  }

  /*头部盒子*/
  .header .box {
    width: 1200px;
    height: 70px;
    margin: 0 auto;
  }

  /*左侧 logo*/
  .header .box .left {
    cursor: pointer;
    float: left;
    height: 100%;
  }

  /*中间 首页课程导航*/
  .header .box .center-box {
    float: left;
    height: 100%;
    margin-left: 150px;
  }

  /*首页 课程 导航*/
  .header .box .center-box .home,
  .header .box .center-box .course,
  .header .box .center-box .nav {
    cursor: pointer;
    /*border:1px solid black;*/
    float: left;
    width: 80px;
    font-size: 18px;
    font-weight: lighter;
    line-height: 70px;
    text-align: center;
  }

  .header .box .center-box .course,
  .header .box .center-box .nav {
    margin-left: 20px;
  }

  /*当前在哪个tab now*/
  .header .box .center-box .now {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #000000 !important;
  }

  /*右侧 搜索 登录*/
  .header .box .right-box {
    float: right;
    height: 100%;
  }

  /*搜索框*/
  .header .box .right-box .search-box {
    float: left;
    margin: 14px 20px 0px 0px;
  }

  /*登录*/
  .header .box .right-box .login {
    cursor: pointer;
    float: right;
    width: 100px;
    font-size: 18px;
    font-weight: lighter;
    line-height: 70px;
    text-align: center;
  }

  .header .box .right-box .userCenter {
    cursor: pointer;
    float: right;
    width: 100px;
    font-size: 16px;
    font-weight: lighter;
    line-height: 70px;
    text-align: center;
  }

  /*登录*/
  .header .box .right-box .login:hover {
    cursor: pointer;
    float: right;
    width: 100px;
    color: #F20A0A;
    font-size: 18px;
    font-weight: bolder;
    line-height: 70px;
    text-align: center;
  }
</style>
